<template>
  <div id="fourleftE" class="homeEchartsClass"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
 this.$nextTick(() => {
    this.myChart = echarts.init(document.getElementById("fourleftE"));

  })
  window.addEventListener("resize", () => {
  	// 判断是否存在，直接调用resize方法
    if (this.myChart) this.myChart.resize()
  })
    
    let chartDom = document.getElementById("fourleftE");
    let myChart = echarts.init(chartDom);
    let option;

    option = {
  title: {
   
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
     orient: "horizontal",
     bottom:0,
     icon:'rect',
     itemHeight:10,
     itemWidth:10,
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: [
        "12月",
        "11月",
        "10月",
        "9月",
        "8月",
        "7月",
        "6月",
        "5月",
        "4月",
        "3月",
        "2月",
        "1月",]
  },
  series: [
    {
      name: '业务熔断',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, ]
    },
    {
      name: '业务故障',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, ]
    },
    {
      name: '交易限流',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141,]
    },
    {
      name: '储存转发',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141]
    }
  ]
};

option && myChart.setOption(option);

  },
  watch: {
   "$store.state.app.sidebar.opened"() {
       setTimeout(() => {
           this.myChart.resize()
       }, 300)
   }
}
};
</script>

<style lang='scss' scoped>
.homeEchartsClass{
    height: 100%;
    width: 100%;

}
</style>